import React, { useEffect, useState } from "react";
import { modalPropsType } from "@/constants/types";
import { Image, Modal, Table } from "antd";
import { activityMembers } from "../../services"; 


const ViewActivityCode = ({title, visible, onCancel, currentRow}: modalPropsType) => {
  const [dataSource, setDataSource] = useState([]);

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      width: 100,
      render: (_: any, record: any, index: number) => <span>{index + 1}</span>
    },
    {
      title: '活动码',
      dataIndex: 'qrCode',
      width: 200,
      render: (_: string, record: any) => {
        return (
          <Image width={100} height={100} src={record?.qrCode} />
        );
      }
    },
    {
      title: 'URL地址',
      dataIndex: 'url',
    },
    {
      title: '手机号码',
      width: 150,
      dataIndex: 'mobile',
    },
    {
      title: '创建时间',
      width: 180,
      dataIndex: 'createTime',
    },
    {
      title: '创建人',
      width: 120,
      dataIndex: 'createBy',
    }
  ];

  useEffect(() => {
    if (currentRow?.id) {
      activityMembers({id: currentRow?.id}).then(
        res => {
          setDataSource(res || []);
        }
      )
    } else {
      setDataSource([]);
    }
  }, [currentRow?.id])

  return (
    <Modal
      title={title}
      onCancel={onCancel}
      open={visible}
      footer={false}
      width="1200px"
    >
      <div className="modal-form-padding">
        <Table
          rowKey="id"
          columns={columns}
          dataSource={dataSource}
        />
      </div>
    </Modal>
  );
}
export default ViewActivityCode;